const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const extractPCSS = new ExtractTextPlugin('css/[name]-pcss.css', {
    allChunks: true,
});
const extractLESS = new ExtractTextPlugin('css/[name]-less.css', {
    allChunks: true,
});
const extractCSS = new ExtractTextPlugin('css/[name]-css.css', {
    allChunks: true,
});
const HtmlWebpackPlugin = require('html-webpack-plugin');
let clientEntry = {
    main: ['babel-polyfill', './src/entry.js'],
    vendor: ['jquery', 'react', 'react-dom', 'react-router', 'antd', 'flatpickr', 'prop-types', 'sweetalert', 'tippy.js'],
};

let browserConfig = {
    entry: clientEntry,
    output: {
        path: path.join(__dirname, '/public'),
        publicPath: './',
        filename: '[name].client.js',
        chunkFilename: '[id].[chunkhash:8].bundle.js',
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader?jQuery!expose-loader?$',
            },
            {
                test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 2048,
                            name: '[name].[ext]',
                        },
                    },
                    {
                        loader: 'webp-loader',
                    },
                ],
            },
            {
                test: /\.(png|jpe?g|gif)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 2048,
                            name: '[name].[ext]',
                        },
                    },
                ],
            },
            {
                test: /\.(jsx|js)?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                }],
            },
            {
                test: /\.(css)$/,
                use: extractCSS.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: false,
                                importLoaders: 1,
                                minimize: true,
                                autoprefixer: false,
                                localIdentName: '[name]__[local]__[hash:base64:8]',
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: (loader) => [
                                    require('autoprefixer')({browsers: 'last 5 versions'}),
                                    require('postcss-import')(),
                                    require('precss')(),
                                ],
                            },
                        },
                    ],
                }),
            },
            {
                test: /\.(pcss)$/,
                use: extractPCSS.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: false,
                                minimize: true,
                                importLoaders: 1,
                                autoprefixer: false,
                                localIdentName: '[name]__[local]__[hash:base64:8]',
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: (loader) => [
                                    require('autoprefixer')({browsers: 'last 5 versions'}),
                                    require('postcss-import')(),
                                    require('precss')(),
                                ],
                            },
                        },
                    ],
                }),
            },
            {
                test: /\.(less)$/,
                use: extractLESS.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: false,
                                minimize: true,
                                importLoaders: 1,
                                autoprefixer: false,
                                localIdentName: '[name]__[local]__[hash:base64:8]',
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: (loader) => [
                                    require('autoprefixer')({browsers: 'last 5 versions'}),
                                    require('postcss-import')(),
                                    require('precss')(),
                                ],
                            },
                        }, {
                            loader: 'less-loader',
                        },
                    ],
                }),
            },
        ],
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'js/vendor.js',
            minChunks: Infinity,
            children: true,
        }),
        new webpack.ProvidePlugin({
            'React': 'react',
            'ReactDom': 'react-dom',
            'ReactRouterDom': 'react-router-dom',
            '$': 'jquery',
            'window.$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery',
            'Tether': 'tether',
            'window.Tether': 'tether',
            'PropTypes': 'prop-types',
            'swal': 'sweetalert',
            'tippy': 'tippy.js',
            'Antd': 'antd',
            'Popper': ['popper', 'default'],
        }),
        new webpack.DefinePlugin({
            // 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) || JSON.stringify('development'),
            'process.env.NODE_ENV': JSON.stringify('production'),
        }),
        // new ParallelUglifyPlugin({
        //     uglifyJS: {
        //         output: {
        //             comments: false,
        //         },
        //         compress: {
        //             warnings: false,
        //         },
        //     },
        // }),
        extractCSS,
        extractPCSS,
        extractLESS,
        new HtmlWebpackPlugin({
            'filename': './index.html',
            'template': './src/template.html',
            'cache': false,
            'inject': false,
            'hash': true,
            'chunks': ['vendor', 'main'],
            'minify': {
                removeComments: true,
                collapseWhitespace: false,
            },
        }),
    ],
    devtool: 'source-map',
};

module.exports = [browserConfig];
